<template>
    <el-input
    v-model="query"
    placeholder="请输入关键字"
    @input="onQueryChanged"
  />
    <el-tree-v2
    ref="treeRef"
    :data="data"
    :props="treeProps"
    :filter-method="filterMethod"
    :height="300"
    :highlight-current="true"
    @node-click="handleClick"
  >
    <template #default="{ node }">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <el-tooltip
          class="box-item"
          effect="dark"
          :content="node.data.bz"
          placement="right"
        >
          <span>{{ node.label }}</span>
        </el-tooltip>
      </span>
    </template>
  </el-tree-v2>

</template>

<script lang="ts" setup>
import { ref } from 'vue';
import {ElTreeV2} from 'element-plus'
import type { TreeNode, TreeNodeData } from 'element-plus/es/components/tree-v2/src/types'
import {
  getTreeApi
} from '@/api/knowledgeBase/typeTree.js'
const treeRef = ref<InstanceType<typeof ElTreeV2>>()   
// 属性映射
const treeProps = {
  value: 'id',
  label: 'flmc',
  children: 'children',
}
const query = ref('')
const data = ref([])

const filterMethod = (query: string, node) => {
  return node.flmc.includes(query)
}
// 过滤搜索时调用
const onQueryChanged = (query: string) => {
  treeRef.value!.filter(query)
}

const emit = defineEmits(['chooseZsfl'])

// 点击节点
const handleClick = (data: TreeNodeData, node: TreeNode, e: MouseEvent)=>{
    console.log("TreeNodeData======"+data)
    console.log("TreeNode======"+node)
    console.log("MouseEvent======"+e)

    // 选择末尾分类，才传递当前选中分类的id给父组件
    if(node.isLeaf){
      emit('chooseZsfl',node.data.id)
    }
    

}

// 获取分类树
const getData = () => {
  getTreeApi().then(res=>{
    data.value = res.data
  })
}
// 打开页面时获取知识分类树
getData()

</script>